<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用多栏布局</title>
</head>
<style>
#div1{
	background:red;
	-webkit-column-count:3;
	-webkit-column-gap:50px;
	-webkit-column-rule:2px solid blue;
	width:40em;
}
#div2{
	background:green;
}
</style>
<body>
<div id="div1">
<p>
示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
</p>
</div>
<div id="div2">
我是文字。我是文字。我是文字。我是文字。我是文字。我是文字。我是文字。我是文字。我是文字。我是文字。
</div>
</body>
</html>
